// 后台管理系统动画
.admin-layout {
  // 页面切换动画
  .fade-admin-enter-active,
  .fade-admin-leave-active {
    transition: opacity 0.3s ease;
  }

  .fade-admin-enter-from,
  .fade-admin-leave-to {
    opacity: 0;
  }

  // 菜单展开收起动画
  .menu-expand-enter-active,
  .menu-expand-leave-active {
    transition: all 0.3s ease-in-out;
    overflow: hidden;
  }

  .menu-expand-enter-from,
  .menu-expand-leave-to {
    opacity: 0;
    transform: translateX(-20px);
  }

  // 数据加载动画
  .data-loading {
    animation: adminSpin 1s linear infinite;
  }

  @keyframes adminSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  // 卡片hover效果
  .admin-card-hover {
    transition: all 0.3s ease;
    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 4px 12px var(--admin-shadow);
    }
  }

  // 按钮点击波纹
  .admin-btn-ripple {
    position: relative;
    overflow: hidden;
    
    &::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      pointer-events: none;
      background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
      background-repeat: no-repeat;
      background-position: 50%;
      transform: scale(10, 10);
      opacity: 0;
      transition: transform .5s, opacity 1s;
    }

    &:active::after {
      transform: scale(0, 0);
      opacity: .3;
      transition: 0s;
    }
  }
} 